import React, {Component} from 'react';
import cs from 'classnames';
import BaseCmpt from '../BaseCmpt';
import './index.css';
import {Progress, Button} from 'antd';
import Ajax from '../../common/ajax';

class Seckill extends BaseCmpt {

    static defaultProps = {
        data: {
            type: 112,
            style: {},
            dataset: {}
        }
    };

    constructor(props) {
        super(props);
        this.state = {
            actModList: [],
            timerStrs: {}
        };
    }

    componentDidMount() {
        this._fetch();
    }

    componentWillUnmount() {
        this._timerId && clearTimeout(this._timerId)
    }

    render() {
        var {onSelected, selected, data} = this.props;
        var {actModList, timerStrs} = this.state;
        var {style, dataset} = data;

        return (
            <div
                onClick={(e) => {
                    onSelected && onSelected(e)
                }}
                className={cs({'seckillList cmptEle': true, 'cmptEle_selected': selected})}
                style={style}
            >
                {
                    actModList && actModList.length > 0 ?
                        actModList.map(function (actMod, modIndex) {
                            return (
                                <div
                                    key={'actMod_' + modIndex}
                                    className={actMod.state == 0 ? 'seckillSection seckillSection_pre' : 'seckillSection'}
                                >
                                    <div className="seckillSection__title">
                                        <div className="seckillSection__title__icon"></div>
                                        <div
                                            className="seckillSection__title__text">{actMod.begin_time}{actMod.desc}</div>
                                    </div>
                                    <div className="seckillSection__content">
                                        {
                                            actMod.list.map(function (actItem, actIndex) {
                                                return (
                                                    <div className="seckillItem" key={'actItem_' + actItem.id}>
                                                        <div
                                                            className="seckillItem__imgWrap"
                                                            style={{backgroundImage: 'url(' + actItem['goods_info']['image_url'] + ')'}}
                                                        >
                                                            {actMod.state == 0 ?
                                                                <div className="seckillItem__timer">
                                                                    距离开始还剩：{timerStrs[modIndex + '|' + actIndex]}
                                                                </div>
                                                                :
                                                                (
                                                                    actMod.state == 1 ?
                                                                        <div className="seckillItem__timer">
                                                                            距离结束还剩：{timerStrs[modIndex + '|' + actIndex]}
                                                                        </div>
                                                                        : null
                                                                )
                                                            }
                                                        </div>
                                                        <div
                                                            className="seckillItem__name"
                                                        >{actItem['goods_info']['name']}</div>
                                                        {
                                                            actMod.state == 0 ?
                                                                <div className="seckillItem__progressWrap">
                                                                    <div className="seckillItem__hasSell">
                                                                        限量{actItem.goods_amount}件
                                                                    </div>
                                                                </div>
                                                                :
                                                                (
                                                                    actMod.state == 1 ?
                                                                        <div className="seckillItem__progressWrap">
                                                                            <Progress
                                                                                className="seckillItem__progress"
                                                                                percent={actItem.sale_amount / actItem.goods_amount * 100}
                                                                                strokeWidth={5}
                                                                            />
                                                                            <div className="seckillItem__hasSell">
                                                                                已抢{actItem.sale_amount}件
                                                                            </div>
                                                                        </div>
                                                                        :
                                                                        <div className="seckillItem__progressWrap">
                                                                            <div
                                                                                className="seckillItem__hasSell sellOver">{actItem.goods_amount}件已售完
                                                                            </div>
                                                                        </div>
                                                                )
                                                        }
                                                        <div className="seckillItem__foot">
                                                            <div className="seckillItem__priceWrap">
                                                                <div className="seckillItem__price">
                                                                    ￥{actItem['sale_price']}</div>
                                                                <div className="seckillItem__priceOld">
                                                                    ￥{actItem['goods_info']['market_price']}</div>
                                                            </div>
                                                            <div className="seckillItem__btnWrap">
                                                                {
                                                                    actMod.state == 0 ?
                                                                        <Button>即将开抢</Button>
                                                                        :
                                                                        (
                                                                            actMod.state == 1 ?
                                                                                <Button type="primary">立即抢购</Button>
                                                                                :
                                                                                <Button disabled>已抢光</Button>
                                                                        )
                                                                }
                                                            </div>
                                                        </div>
                                                    </div>
                                                )
                                            })
                                        }
                                    </div>
                                </div>
                            )
                        })
                        :
                        (
                            <div className="seckillList__empty">秒杀活动空空如也~</div>
                        )
                }
            </div>
        );
    }

    _fetch() {
        var _self = this;

        _self._timerList = {};
        Ajax.G('/openapi/CActivity/flashActList', {}, function (data) {
            var actModList = data.result.actList;

            actModList.forEach(function (actMod, modIndex) {
                actMod.list.forEach(function (actItem, index) {
                    var leftTime = actItem.state == 0 ? actItem.begin_left_time : actItem.left_time;

                    if (leftTime > 0) {
                        _self._timerList[modIndex + '|' + index] = leftTime;
                    }
                });
            });

            _self.setState({
                actModList,
                timerStrs: {}
            });

            if (_self._timerId) {
                clearTimeout(_self._timerId);
            }
            _self._timerDown();
        });
    }

    _timerDown() {
        var _self = this;
        var timerStrs = _self.state.timerStrs;
        var _timerList = _self._timerList;
        var isOver = true;

        Object.keys(_timerList).forEach(function (key) {
            var sec = _timerList[key];

            timerStrs[key] = _self._getTimeBySec(sec);

            if (sec == 0) {
                _self._fetch();
                return;
            }

            isOver = false;
            _timerList[key] = --sec;
        });

        if (isOver) {
            return;
        }

        _self.setState({
            timerStrs,
        });
        _self._timerId = setTimeout(() => {
            _self._timerDown();
        }, 1000);
    }

    _getTimeBySec(sec) {
        var h = parseInt(sec / 3600);
        var m = parseInt((sec - h * 3600) / 60);
        var s = sec - h * 3600 - m * 60;

        return [h, m, s].map(formatNumber).join(':');

        function formatNumber(n) {
            n = n.toString()
            return n[1] ? n : '0' + n
        }
    }
}

export default Seckill;
